﻿
<div class="layui-container">
    <h2>Layui文件上传</h2>
    <hr class="layui-bg-green" />

    <div class="layui-row">
        <div class="layui-col-xs2 layui-col-xs-offset10">
            <button class="layui-btn layui-btn-fluid" id="btn_Upload">
                <i class="layui-icon layui-icon-upload"></i>上传文件
            </button>
        </div>
        <div class="layui-col-xs12">
            <table id="data_File" lay-filter="file"></table>
        </div>
    </div>
</div>

<script type="text/html" id="tpl_Operate">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
    </div>
</script>

@section Scripts
{
    <script type="text/javascript">
        layui.use(['table', 'layer', 'upload'],
            function() {

                var table = layui.table,
                    $ = layui.$,
                    upload = layui.upload,
                    layer = layui.layer;

                //初始化列表数据

                var tableInstance = table.render({
                    elem: '#data_File',
                    url: '@Url.Action("FileList")',
                    response: {
                        statusName: 'isSuccess',
                        statusCode: true,
                        msgName: 'errorMessage',
                        countName: 'totalCount',
                        dataName: 'currentPageData'
                    },
                    cols: [
                        [
                            { field: 'originalFileName', title: '文件名称', width: '30%' },
                            { field: 'fileSize', title: '文件大小', width: '10%' },
                            { field: 'fileType', title: '文件类型', width: '10%', align: 'center' },
                            { field: 'displayUrl', title: '展示地址', width: '30%', align: 'center' },
                            { title: '操作', toolbar: '#tpl_Operate', align: 'center' },
                        ]
                    ]
                });

                //初始化文件上传
                upload.render({
                    elem: '#btn_Upload',
                    field: 'file',
                    url: '@Url.Action("Uplaod")',
                    exts: 'jpg|gif|png|jpeg|xls|rar|zip',
                    done: function(res) {
                        tableInstance.reload();
                        layer.alert('上传成功',
                            {
                                icon: 1
                            });
                    },
                    error: function() {
                        layer.alert('上传失败',
                            {
                                icon: 2
                            });
                    }
                });

                //删除文件
                table.on('tool(file)',
                    function(obj) {

                        var layEvent = obj.event,
                            rowData = obj.data;

                        if (layEvent === 'delete') {
                            layer.confirm('确定要删除文件吗',
                                {
                                    icon: 3
                                },
                                function(layerIndex) {
                                    layer.close(layerIndex);

                                    $.post('@Url.Action("Delete")',
                                        { fileName: rowData.originalFileName },
                                        function(res) {
                                            if (res.isSuccess) {
                                                obj.del();
                                            } else {
                                                layer.alert('删除失败',
                                                    {
                                                        icon: 2
                                                    });
                                            }
                                        });
                                });
                        }
                    });
            })
    </script>
}
